<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>giggle登录</title>
  <style type="text/css">
    body {
      text-align: center;
    }
    #top-image {
      background-size: 1920px 1080px;
      background: linear-gradient(
              rgba(0, 0, 0, 0.2),
              rgba(0, 0, 0, 0.2)
      ), url('img/bgbg2.png') no-repeat fixed;
      position:fixed ;
      top:0;
      width:100%;
      z-index:0;
      height:100%;
    }
    a {
      text-decoration: none
    }
    #logo{
      margin-top: 220px;
      margin-bottom: 40px;
      filter:alpha(Opacity=50);
      opacity: 0.8;
    }
    .login {
      text-align: center;
      margin:0 auto;
      width: 300px;
    }
    .input{
      text-indent:32px;
      background-color: transparent;
      font-size: 15px;
      color: #666;
      width: 100%;
      height: 100%;
      border: none;

      -webkit-appearance: none;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
      color:#999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:#999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:#999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color:#999;
    }
    #emailDiv{
      border: 1px solid #bbbbbb;
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;
      width: 300px;
      height: 40px;
      border-bottom: none;
    }
    #myemail{
      background: url(img/email.png) no-repeat;
      background-size: 25px 25px;
      background-position: 4px 7px;

    }
    #passwordDiv{
      border: 1px solid #bbbbbb;
      width: 300px;
      height: 40px;
      border-top: 1px solid #DDDDDD;
      border-bottom: none;
      background-color: white;
      filter:alpha(Opacity=50);
      opacity: 0.8;
    }
    #password{
      background: url(img/password.png) no-repeat;
      background-size: 25px 25px;
      background-position: 4px 7px;
    }
    #checkcode{
      font-size: 15px;
      width: 300px;
      height: 40px;
      -webkit-appearance: none;
      border: none;
      background: url(img/verification.png) no-repeat;
      background-size: 25px 25px;
      background-position: 4px 7px;
    }
    #verificationDiv{
      background-color: white;
      width: 300px;
      height: 40px;
      border: 1px solid #bbbbbb;
      border-top: 1px solid #DDDDDD;
      filter:alpha(Opacity=50);
      opacity: 0.8;
    }

    #submitBtn{
      margin-top: -20px;
      font:bold 18px 微软雅黑;
      border: 1px solid #63decd;
      width: 300px;
      height: 40px;
      background-color: #63decd;
      filter:alpha(Opacity=50);
      opacity: 0.8;
      color: #ffffff;

    }
    #submitBtn:hover{
      background-color: #00e6d0;
    }
    #forgetPas{
      float: left;
      font:normal 13px 微软雅黑;
      color: #333333;
    }
    #forgetPas:hover{
      color: #63decd;
    }
    #signUp{
      float: right;
      font:normal 13px 微软雅黑;
      color: #333333;
    }
    #signUp:hover{
      color: #63decd;
    }
    #codeImg{
      position: relative;
      top: -42px;
      left: 100px;

    }
  </style>

  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/login.js"></script>
  <script src="js/md5.js"></script>
  <script src='js/ios-parallax.js'></script>
</head>

<body>
<div id="top-image">
  <div id="content" class="container">
    <!--放置内容-->
    <div class="login">
      <img src= "img\logologin.png" width="200px" height="75px" id="logo"/>
      <div id="emailDiv">
        <input type="email" name="myemail" id="myemail" class="input" placeholder="电话号码">
      </div>
      <div id="passwordDiv">
        <input type="password" name="password" id="password" class="input" placeholder=" 密码" >
      </div>
      <div id="verificationDiv" class ="control-group">
        <input class="input" type="text" name="checkcode" id="checkcode" placeholder=" 验证码" />
      </div>
      <img id="codeImg"  onclick="changeImage()" alt="换一张" style="cursor: hand;width:100px;"><br/>
      <input type="submit" name="submit" id="submitBtn" value="登录" onclick="login()" style="height:40px;width:300px;display:inline-block;">

      <div style="height: 20px">
        <a href="change_pwd.html" id="forgetPas"><br>忘记密码？</a><a href="register.html" id="signUp"><br>没有账号？立即注册</a>
      </div>
    </div>
  </div>
</div>


<script>
    $('#top-image').iosParallax({

        // How fast the background moves
        movementFactor: 50,

        // How much to dampen the movement (higher is slower)
        dampenFactor: 36

    });
</script>
</body>
</html>